<template>
	<view>
		<!-- event 为点击事件，返回事件item-id -->
		<!-- 更改样式到浏览记录 -->
		<CardMsg @event="styleclick"
			src="http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg"
			name="五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟" price="299.00" item-id="122"
			number="数量:999份; 19年，高三" :price-style="{color: '#E43841'}" :number-style="{color: '#AE7A1F'}" />

		<!-- 一般使用 -->
		<CardMsg @event="styleclick" item-id="12223"
			src="http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg"
			name="五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟" price="299.00" number="数量:999份; 19年，高三" />

		<!-- 订单组合使用 options 关闭订单操作显示-->
		<CardOrder @event="styleclick" options="false" order-no="202103543956905775024420" order-status="待发货"
			order-pay="1566.00" order-dis="1500.00" order-fare="110.00">
			<CardMsg item-id="12223"
				src="http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg"
				name="五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟" price="299.00" number="数量:999份; 19年，高三" />
			<CardMsg item-id="12223"
				src="http://mer.crmeb.net/uploads/def/20200829/fd3a5f3f2ffe8e85a2761f979af63cb3.jpg"
				name="五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟" price="299.00" number="数量:999份; 19年，高三" />
		</CardOrder>
	</view>
</template>

<script>
	import CardMsg from "@/components/cardStyle/card-1.0.vue"
	import CardOrder from "@/components/cardStyle/o-card.vue"
	export default {
		components: {
			CardOrder,
			CardMsg
		},
		data() {
			return {}
		},
		methods: {
			styleclick: function(id) {
				console.log('click style box ', id)
			}
		}
	}
</script>

<style>
</style>
